<template>
  <div>
    <div class="footer-container">
      <div class="particles-bg" id="particles"></div>

      <div class="footer-content">
        <div class="footer-header">
          <h1>极致购物体验</h1>
          <p>我们致力于为您提供最优质的商品、最便捷的购物流程和最完善的售后服务</p>
        </div>

        <div class="footer-grid">
          <div class="footer-card">
            <div class="card-header">
              <div class="card-icon">
                <i class="fas fa-shopping-cart"></i>
              </div>
              <h2 class="card-title">购物指南</h2>
            </div>
            <div class="card-content">
              <ul>
                <li>新用户注册即享<span class="highlight">200元礼包</span></li>
                <li>会员等级制度，购物享更多优惠</li>
                <li>多种便捷支付方式，安全无忧</li>
                <li>全场商品满299元包邮</li>
                <li>7×24小时客服在线服务</li>
              </ul>
            </div>
          </div>

          <div class="footer-card">
            <div class="card-header">
              <div class="card-icon">
                <i class="fas fa-headset"></i>
              </div>
              <h2 class="card-title">售后服务</h2>
            </div>
            <div class="card-content">
              <ul>
                <li><span class="highlight">7天无理由退换货</span>保障</li>
                <li>质量问题<span class="highlight">15天免费换新</span></li>
                <li>全国联保，1800+服务网点</li>
                <li>延长保修服务可选</li>
                <li>专属客服快速响应通道</li>
              </ul>
            </div>
          </div>

          <div class="footer-card">
            <div class="card-header">
              <div class="card-icon">
                <i class="fas fa-credit-card"></i>
              </div>
              <h2 class="card-title">支付方式</h2>
            </div>
            <div class="card-content">
              <ul>
                <li>支持所有主流支付平台</li>
                <li>信用卡分期免息优惠</li>
                <li>企业采购对公账户支付</li>
                <li>货到付款，验货无忧</li>
                <li>电子礼品卡购物更便捷</li>
              </ul>
              <div class="payment-methods">
                <div class="payment-method">
                  <i class="fab fa-cc-visa"></i>
                </div>
                <div class="payment-method">
                  <i class="fab fa-cc-mastercard"></i>
                </div>
                <div class="payment-method">
                  <i class="fab fa-cc-paypal"></i>
                </div>
                <div class="payment-method">
                  <i class="fab fa-cc-apple-pay"></i>
                </div>
                <div class="payment-method">
                  <i class="fab fa-cc-alipay"></i>
                </div>
                <div class="payment-method">
                  <i class="fab fa-cc-wechat-pay"></i>
                </div>
              </div>
            </div>
          </div>

          <div class="footer-card">
            <div class="card-header">
              <div class="card-icon">
                <i class="fas fa-envelope"></i>
              </div>
              <h2 class="card-title">联系我们</h2>
            </div>
            <div class="card-content">
              <ul>
                <li>客服热线: <span class="highlight">400-888-9999</span></li>
                <li>服务时间: 8:00-24:00</li>
                <li>邮箱: support@premiummall.com</li>
                <li>企业合作: business@premiummall.com</li>
                <li>总部地址: 上海市浦东新区科技园88号</li>
              </ul>
              <div class="social-links">
                <a href="#" class="social-link">
                  <i class="fab fa-weixin"></i>
                </a>
                <a href="#" class="social-link">
                  <i class="fab fa-weibo"></i>
                </a>
                <a href="#" class="social-link">
                  <i class="fab fa-qq"></i>
                </a>
                <a href="#" class="social-link">
                  <i class="fab fa-tiktok"></i>
                </a>
              </div>
            </div>
          </div>
        </div>

        <div class="copyright">
          <p>Copyright © 2015-2023 PremiumMall Inc. 保留所有权利 | <a href="#">隐私政策</a> | <a href="#">用户协议</a> | <a href="#">知识产权</a></p>
          <p>沪ICP备12345678号-1 | 沪公网安备 31011502008888号 | 食品经营许可证：JY1234567890 | 出版物经营许可证：新出发沪批字第U8888号</p>

          <div class="badges">
            <div class="badge">
              <i class="fas fa-shield-alt"></i> 诚信网站
            </div>
            <div class="badge">
              <i class="fas fa-lock"></i> 安全认证
            </div>
            <div class="badge">
              <i class="fas fa-star"></i> 消费者保障
            </div>
            <div class="badge">
              <i class="fas fa-check-circle"></i> 正品保证
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TailderComponent",
  methods:{
    createParticles() {
    const container = document.getElementById('particles');
    const particleCount = 30;

    for (let i = 0; i < particleCount; i++) {
      const particle = document.createElement('div');
      particle.classList.add('particle');

      // 随机大小
      const size = Math.random() * 10 + 2;
      particle.style.width = `${size}px`;
      particle.style.height = `${size}px`;

      // 随机位置
      particle.style.left = `${Math.random() * 100}%`;
      particle.style.top = `${Math.random() * 100 + 100}%`;

      // 随机动画延迟
      particle.style.animationDelay = `${Math.random() * 15}s`;

      // 随机颜色
      const hue = Math.floor(Math.random() * 40) + 180;
      particle.style.background = `hsla(${hue}, 100%, 70%, ${Math.random() * 0.4 + 0.3})`;

      container.appendChild(particle);
   }
}
  }

}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;

}

.footer-container {
  width: 100%;
  background: rgba(13, 19, 33, 0.9);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  position: relative;
  border: 1px solid rgba(100, 150, 255, 0.2);
  backdrop-filter: blur(10px);
  margin: 0 auto;
}

.particles-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(100, 200, 255, 0.3);
  animation: float 15s infinite linear;
}

@keyframes float {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0.3;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    transform: translateY(-500px) translateX(100px);
    opacity: 0.3;
  }
}

.footer-content {
  position: relative;
  z-index: 10;
  padding: 50px 40px 30px;
  color: #e0e0ff;
}

.footer-header {
  text-align: center;
  margin-bottom: 50px;
}

.footer-header h1 {
  font-size: 2.8rem;
  background: linear-gradient(to right, #ff7eee, #a18aff, #5ce1e6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 15px;
  text-shadow: 0 0 15px rgba(92, 225, 230, 0.3);
  letter-spacing: 1px;
}

.footer-header p {
  font-size: 1.2rem;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
  color: #b0b0ff;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-bottom: 50px;
}

.footer-card {
  background: rgba(30, 40, 70, 0.4);
  border-radius: 15px;
  padding: 30px;
  transition: all 0.4s ease;
  border: 1px solid rgba(100, 150, 255, 0.1);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.footer-card:hover {
  transform: translateY(-10px);
  background: rgba(40, 50, 90, 0.6);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), 0 0 30px rgba(92, 225, 230, 0.2);
  border-color: rgba(100, 150, 255, 0.3);
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
}

.card-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #5ce1e6, #a18aff);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 15px;
  font-size: 1.8rem;
  color: #fff;
}

.card-title {
  font-size: 1.5rem;
  font-weight: 600;
  background: linear-gradient(to right, #5ce1e6, #a18aff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.card-content ul {
  list-style: none;
}

.card-content li {
  margin-bottom: 15px;
  padding-left: 10px;
  position: relative;
  line-height: 1.5;
}

.card-content li:before {
  content: "•";
  color: #5ce1e6;
  position: absolute;
  left: -15px;
  font-size: 1.2rem;
}

.payment-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 15px;
}

.payment-method {
  width: 50px;
  height: 30px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
}

.social-links {
  display: flex;
  gap: 15px;
  margin-top: 20px;
}

.social-link {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #5ce1e6;
  font-size: 1.2rem;
  transition: all 0.3s ease;
}

.social-link:hover {
  background: #5ce1e6;
  color: #0f3460;
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(92, 225, 230, 0.4);
}

.copyright {
  border-top: 1px solid rgba(100, 150, 255, 0.2);
  padding-top: 30px;
  text-align: center;
  color: #8a8ac4;
  font-size: 0.95rem;
  line-height: 1.8;
}

.copyright a {
  color: #5ce1e6;
  text-decoration: none;
  transition: all 0.3s ease;
}

.copyright a:hover {
  color: #ff7eee;
  text-decoration: underline;
}

.badges {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.badge {
  padding: 8px 20px;
  background: rgba(30, 40, 70, 0.6);
  border-radius: 30px;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(100, 150, 255, 0.2);
}

.badge i {
  color: #5ce1e6;
}

@media (max-width: 768px) {
  .footer-header h1 {
    font-size: 2.2rem;
  }

  .footer-content {
    padding: 30px 20px;
  }

  .footer-grid {
    gap: 20px;
  }

  .footer-card {
    padding: 20px;
  }
}
</style>